<template>
  <Container class="mobile-form-modal">
    <div class="mobile-form-modal-inner">
      <div class="title">{{ $t("form.updatePlan.title") }}</div>
      <a-form class="form" :model="formState" ref="formRef">
        <a-form-item
          class="form-item"
          :label="$t('form.updatePlan.form.item_1.label')"
          name="department_id"
          :rules="[
            {
              required: true,
              message: $t('form.updatePlan.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-select v-model:value="formState.department_id">
            <a-select-option
              :value="item.title"
              v-for="item in gloablStore.departMentList"
              :key="item.id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updatePlan.form.item_2.label')"
          name="profession_id"
          :rules="[
            {
              required: true,
              message: $t('form.updatePlan.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-select v-model:value="formState.profession_id">
            <a-select-option
              :value="item.title"
              v-for="item in gloablStore.professionList"
              :key="item.id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updatePlan.form.item_3.label')"
          name="stage_id"
          :rules="[
            {
              required: true,
              message: $t('form.updatePlan.form.item_3.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-select v-model:value="formState.stage_id">
            <a-select-option
              :value="item.title"
              v-for="item in gloablStore.stageList"
              :key="item.id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div class="footer-btn">
        <div class="footer-btn-inner">
          <a-button @click="goBack">{{ $t("btnText.cancel") }}</a-button>
          <a-button
            class="ensure-btn"
            :class="formIsValid ? '' : 'disabled'"
            type="primary"
            @click="continuePublish"
            >{{ $t("btnText.save") }}</a-button
          >
        </div>
      </div>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import {
  postMemberInfo,
  postUpdateMemberInfo,
  postUpdateMemberOne,
} from "../../api/member";
import { useGlobalStore, useMemberStore } from "../../store";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const router = useRouter();
const memberStore = useMemberStore();
const gloablStore = useGlobalStore();

const initForm = () => {
  formState.value.department_id =
    initSetCareerData("depart", memberStore.profile?.department_id!) || "";
  formState.value.profession_id =
    initSetCareerData("profession", memberStore.profile?.profession_id!) || "";
  formState.value.stage_id =
    initSetCareerData("stage", memberStore.profile?.stage_id!) || "";
};

const initSetCareerData = (
  key: string,
  value: string,
  getIdValue?: boolean
) => {
  let key_value = "";
  if (key == "depart") {
    gloablStore.departMentList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  if (key == "profession") {
    gloablStore.professionList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  if (key == "stage") {
    gloablStore.stageList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  return key_value;
};

const formIsValid = computed(() => {
  let flag = true;
  if (!formState.value.department_id) flag = false;
  if (!formState.value.profession_id) flag = false;
  if (!formState.value.stage_id) flag = false;
  return flag;
});

// 发布
const formState = ref({
  department_id: "",
  profession_id: "",
  stage_id: "",
});

const formRef = ref();

const continuePublish = () => {
  if (!formIsValid.value) return;
  formRef.value.validate().then(async () => {
    let paramsData = {
      department_id: initSetCareerData(
        "depart",
        formState.value.department_id,
        true
      ),
      profession_id: initSetCareerData(
        "profession",
        formState.value.profession_id,
        true
      ),
      stage_id: initSetCareerData("stage", formState.value.stage_id, true),
    };
    let res = await postUpdateMemberInfo(paramsData);
    if (res.code === 200) {
      let res2 = await postMemberInfo();
      if (res2.code === 200) {
        Object.assign(memberStore.profile!, res2.data);
        message.success($t("message.changed_success"));
      } else {
        message.error($t('message.error.update'));
      }
    } else {
      message.error($t('message.error.update'));
    }
    goBack();
  });
};
const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  initForm();
});
</script>
<style lang="less">
.mobile-form-modal {
  .wrap-container > .wrap-pl {
    padding-bottom: 0 !important;
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");

:deep(.form) {
  .ant-form-item {
    .ant-row {
      justify-content: space-between;
      flex: 1;
      flex-wrap: nowrap;
      .ant-col {
        display: flex;
        flex: 1 !important;
        padding-bottom: 0;
        .ant-select-selector {
          border-color: transparent;
          box-shadow: 0 0 0 transparent;
        }
      }
      .ant-form-item-explain-error {
        text-align: right;
      }
    }
  }
}
</style>
